<template>
    <el-col  :style="{height:heightLength+'px'}" class="el-left-menu" :span="3">
        <el-menu  background-color="#324157"
                  text-color="#bfcbd9"
                  :default-active="active"
                  :active="active"
                  class="el-menu-vertical-demo"
                  router
                  unique-opened
        >
            <div>
                <el-submenu v-for="menuItem in routeList"
                            :key="menuItem.menuHref"
                            :index="menuItem.menuHref"
                            v-if="menuItem.subMenus && menuItem.subMenus.length"
                >
                    <template slot="title">
                        <span>{{menuItem.menuName}}</span>
                    </template>
                    <el-menu-item
                            v-for="item in menuItem.subMenus"
                            :index="item.menuHref"
                            :key="item.menuHref"
                    >
                        {{item.menuName}}
                    </el-menu-item>
                </el-submenu>
                <el-menu-item
                        :index="menuItem.menuHref"
                        v-else
                >
                    {{menuItem.menuName}}
                </el-menu-item>
            </div>

        </el-menu>
    </el-col>
</template>


<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
var routerList = require('./router-leftBar.js');
export default {
  data () {
    return {
        active:'',
        routeList: routerList.default.routerList,
        heightLength:''                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
    }
  },
  created(){
      this.heightLength = document.body.scrollHeight;
       this.active = '/'+ this.$router.currentRoute.path.split('/')[1];
  },
$route(to, from) {
      console.log(from)
    setTimeout(() => {
      this.active = "/" + this.$router.currentRoute.path.split("/")[1];
    },300);
  },
  mounted(){
      this.routeList = JSON.parse(sessionStorage.getItem("userInfo")).menus;
      window.addEventListener('scroll', ()=>{
         let scrollHeight = document.body.scrollHeight;
         this.heightLength = scrollHeight;
       })
  },
  methods:{
//    leftPermission(){
//        let url = CONSTANT.URL.menuList;
//        common.post(url,'',(res)=>{
//            this.routeList = res.data.bussData;
//            this.active  = '/'+ this.$router.currentRoute.path.split('/')[1];
//        })
//    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
    .el-left-menu{
      height:1000px;
      position: fixed;
      left: 0;
      width: 206px;
    }
    .el-menu-vertical-demo{
      height: 100%;
    }

    .el-menu-item{
        min-width:auto!important;
    }
    .el-menu-item-group__title{
        padding-top: 0px!important;
    }
    .el-menu-item{
        a{
            display: block;
            color: #bfcbd9;
        }
        &.is-active{
            a{
              color: #0E932E;
            }
        }
    }
    .el-menu-vertical-demo{
        height: 100%;
        overflow-y: auto;
        padding-bottom: 100%;
        .el-submenu{
            &:last-child{
                margin-bottom: 100px;
            }
        }
        &::-webkit-scrollbar {  
            width: 14px;  
            height: 14px;  
        }  
            
        &::-webkit-scrollbar-track,  
        &::-webkit-scrollbar-thumb {  
            border-radius: 999px;  
            border: 5px solid transparent;  
        }  
            
        &::-webkit-scrollbar-track {  
            box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  
        }  
            
        &::-webkit-scrollbar-thumb {  
            min-height: 20px;  
            background-clip: content-box;  
            box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
        }  
            
        &::-webkit-scrollbar-corner {  
            background: transparent;  
        }  
    }
</style>
